<template>
    <div class="addUserAuth-container">
        <b-container class="bv-example-row row-box">
            <b-row align-h="center" class="my-userAuthInfo">
                <b-col cols="12" sm="12" md="8" lg="8">
                    <!-- 发送私信区域 -->
                    <div class="userAuthInfo">
                        <div class="userAuth-title">
                            <h4>私聊详情</h4>
                        </div>
                        <p>
                            <span class="back" @click="goBack"><Icon type="md-arrow-round-back" /></span>
                            发送私信给 <router-link :to="'/userInfo/' + pmFriend">{{uName}}</router-link></p>
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                            <FormItem prop="pmContent">
                                <Input v-model="formValidate.pmContent" type="textarea"
                                :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入私信内容"/>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="save('formValidate')">发送</Button>
                            </FormItem>
                        </Form>
                        <!-- 私信列表 -->
                        <div class="private-list">
                            <div class="private" v-for="(item, i) in msgInfoList" :key="i">
                                <!-- 显示接收方 -->
                                <div class="private-item" v-if="item.pmSender==id">
                                    <div class="private-left">
                                        <router-link :to="'/userInfo/' + item.pmReceiver">
                                        <img :src="item.receiverAvatar" alt=""></router-link>
                                        <div class="private-info">
                                            <router-link :to="'/userInfo/' + item.pmReceiver" class="goods-title">
                                            {{item.receiverName}}</router-link>
                                            <p class="msg-content">{{item.pmContent}}</p>
                                        </div>
                                    </div>
                                    <div class="private-right">
                                        <span class="time">{{item.pmTime | dataFormat}}</span>
                                        <span>
                                            <a href="javascript:void(0)" @click.prevent="deleteById(item.pmId)">
                                            <Icon type="md-trash" /></a>
                                        </span>
                                    </div>
                                </div>
                                <!-- 显示发送方（自己） -->
                                <div class="private-item" v-else>
                                    <div class="private-right">
                                        <span class="time">{{item.pmTime | dataFormat}}</span>
                                        <span>
                                            <a href="javascript:void(0)" @click.prevent="deleteById(item.pmId)">
                                            <Icon type="md-trash" /></a>
                                        </span>
                                    </div>
                                    <div class="private-left">
                                        <div class="private-info2">
                                            <router-link :to="'/userInfo/' + item.pmReceiver" class="goods-title">
                                            {{item.receiverName}}</router-link>
                                            <p class="msg-content">{{item.pmContent}}</p>
                                        </div>
                                        <router-link :to="'/userInfo/' + item.pmReceiver">
                                        <img :src="item.receiverAvatar" alt=""></router-link>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="private-item">
                                <div class="private-left">
                                    <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                    <div class="private-info">
                                        <router-link to="/" class="goods-title">我</router-link>
                                        <p class="msg-content">聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容</p>
                                    </div>
                                </div>
                                <div class="private-right">
                                    <span class="time">时间</span>
                                    <span>
                                        <router-link to="/"><Icon type="md-trash" /></router-link>
                                    </span>
                                </div>
                            </div> -->
                            <div class="page-all" v-if="msgInfoList!=''">
                                <Page :total="allPages.total" :page-size="pageSize" :current="pageNum" @on-change="changePage"  />
                            </div>
                        </div>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>

export default {
    name: 'addPrivateMsg',
    data() {
        return {
            pmFriend: this.$route.params.id,
            id: JSON.parse(localStorage.getItem('user')).uId,
            uName: '', // 发送私信给某某用户
            msgInfoList: [], // 私信详情列表
            pageSize: 4, // 每页显示多少条
            allPages: [], // 存放分页1的信息
            pageNum: 1, // 默认展示第一页数据
            formValidate: {
                pmContent: '',
            },
            ruleValidate: {
                pmContent: [
                    { required: true, message: '私信内容不能为空', trigger: 'blur' },
                ],
            },
        }
    },
    created() {
        this.findByUserAndFriend()
        this.findUser()
    },
    methods: {
        // 发送私信
        save(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'privateMsg/save',
                        method: 'post',
                        params: {
                            pmUser: this.id,
                            pmFriend: this.pmFriend,
                            pmSender: this.pmFriend,
                            pmReceiver: this.id,
                            pmContent: this.formValidate.pmContent,
                        },
                        headers: {
                            Authorization: localStorage.getItem('token'),
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.findByUserAndFriend()
                            this.formValidate.pmContent = ''
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    this.$Message.error('Fail!')
                }
            })
        },
        goBack() {
            this.$router.go(-1)
        },
        // 分页改变页码
        changePage(index) {
            // 加载更多，页码改变的回调，返回改变后的页码
            this.pageNum = index
            this.findByUserAndFriend()
        },
        // 根据用户的发送者id(pmUser)和接收者id(pmFriend)查看两用户私信详情
        findByUserAndFriend() {
            this.$axios({
                url: 'privateMsg/findByUserAndFriend/',
                method: 'get',
                params: {
                    pmUser: this.id,
                    pmFriend: this.pmFriend,
                    pageNo: this.pageNum,
                    pageSize: this.pageSize,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.msgInfoList = res.data.pageInfo.list
                    this.allPages = res.data.pageInfo
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据私信id删除此条私信
        deleteById(id) {
            this.$axios({
                url: 'privateMsg/deleteById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findByUserAndFriend()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据用户id查询此用户
        findUser() {
            this.$axios({
                url: 'users/findById/' + this.pmFriend,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.uName = res.data.object.uName
                }
            }).catch(error => {
                console.log(error)
            })
        },
    },
}

</script>
<style scoped>
.row-box{
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    min-height: 520px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.userAuth-title {
    text-align: center;
    margin-bottom: 50px;
}
.back {
    cursor: pointer;
    margin-right: 10px;
}

.private-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
}
.private-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width:73%;
}
.private-left img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 50%;
}
.private-info p {
    margin-bottom: 0;
    font-size: 12px;
}
.private-info {
    max-width:95%;
}
.private-info>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 16px;
}
.private-right>span {
    display: block;
    color: #515a6e;
    font-size: 12px;
    text-align: center;
}
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.private-info2 p {
    margin-bottom: 0;
    font-size: 12px;
}
.private-info2 {
    max-width:95%;
    text-align: right;
    margin-right: 10px;
}
.private-info2>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 16px;
}
</style>
